<template>
		<view class="container">
			<view class="top-bg">
				<u-navbar 
				isBack 
				title="查看详情" 
				background="rgba(0,0,0,0)"
				:border-bottom="false"
				back-icon-color="#fff"
				title-color="#fff"></u-navbar>
				<!-- 申述状态 -->
				<view class="title" v-if="appeal_id">
					<text class="iconfont icon-time" style="font-size:40rpx;margin-right:10rpx;color:#fff;"></text>
					<text class="pay">{{appealStatus[appealDetail.status]}}</text>
				</view>
				<!-- 普通订单状态 -->
				<view class="title" v-else>
					<text class="iconfont" v-if="list.status==3">&#xe68d;</text>
					<text class="pay">{{status[list.status]}}</text>
				</view>
				<!-- <view class="time" v-if="list.status==3">
					还剩 <countdown :startTime="startTime" :endTime="endTime" style="display: inline-block;" /> 自动关闭订单
				</view>
				<view class="time" v-if="list.status==5">
					完成时间：{{$utils.getFormatDate(list.complete_time*1000,'yyyy-MM-dd hh:mm')}}
				</view> -->
			</view>
			<view class="content">
				<!-- 申述信息 -->
				<view class="contract" v-if="appeal_id">
					<view class="title" style="margin-bottom: 20rpx;">
						申述信息
					</view>
					<view class="appealInfo">
						<text>申述类型</text>
						{{appealDetail.appeal_type}}
					</view>
					<view class="appealInfo">
						<text>备注内容</text>
						<view class="mediaBox">
							<view>{{appealDetail.appeal_desc}}</view>
							<view class="mediaItem" v-if="appealDetail.type==1">
								<view v-for="(item,index) in appealDetail.media">
									<image @click="toViewImg(index,5)" :src="item.path" mode=""></image>
								</view>
							</view>
							<view class="mediaItem active" v-else-if="appealDetail.type==2">
								<view style="width: 100%;">
									<video :src="appealDetail.media[0].path" controls></video>
								</view>
							</view>
						</view>
					</view>
					<view class="imgTag" v-if="appealDetail.is_platform==1">
						<image :src="`${baseimg}/static/adminShop/appeal/ptjr.png`" mode=""></image>
					</view>
				</view>	
				<view class="detail">
					<view class="detail-content">
						<view class="is_back" v-if="list.is_back==1">已回退</view>
						<view class="product df-bt">
							<view class="product-info df-ct">
								<image :src="list.avatar.path?list.avatar.path:''" mode="" class="product-img"></image>
								<view class="name">
									<view class="name-top">{{list.team_name}}</view>
									<view class="phone">{{list.team_phone}}</view>
								</view>
							</view>
							<view class="iconfont" @click="toTelPhone">&#xe6b4;</view>						
						</view>
						<view class="top">
							<view class="size df-bt">
								<view class="">
									<view class="t">户型</view>
									<view>{{list.house_type}}</view>
								</view>
								<view class="center">
									<view class="t">面积</view>
									<view>{{list.house_area}}m²</view>
								</view>
								<view class="right">
									<view class="t">小区</view>
									<view>{{list.estate}}</view>
								</view>
							</view>
							<view class="address">
								<view class="address-title t">
									装修地址
								</view>
								<view class="address-detail">
									{{list.address}}
								</view>
							</view>	
										
						</view>
						
					</view>				
				</view>
				<view class="personInCharge">
					<view class="title">
						施工负责人
						<!-- <span v-if="personCharge1 || personCharge2">(点击头像更换负责人)</span> -->
					</view>
					<view class="personInfo">
						<view class="item">
							<image :src="list.director[0].avatar.path?list.director[0].avatar.path:''" mode=""></image>
							{{list.director[0].name?list.director[0].name:'暂无管家'}}
							<span>管家</span>
						</view>
						<view class="border"></view>
						<view class="item">
							<image :src="list.director[1].avatar.path?list.director[1].avatar.path:''" mode=""></image>
							{{list.director[1].name?list.director[1].name:'暂无工长'}}
							<span class="span2">工长</span>
						</view>
					</view>
				</view>	
				<view class="design-time">
					<view class="title">
						施工时间
					</view>
					<view class="u-calendar df-ct">
						<view class="left" @click="handleTime">
							{{startDate}} 至 {{endDate}}
						</view>
						<!-- <view class="right" @click="handleTime">
							
						</view> -->
					    <u-calendar 
						v-model="show" 
						:mode="mode" 
						z-index="99999" 
						@change="change"
						max-date="2100-01-01">
							<view slot="tooltip">
								<view class="title">
									请选择设计开始/结束时间
								</view>
							</view>
						</u-calendar>
					</view>
				</view>	
				<view class="contract">
					<view class="title">
						订单合同
					</view>
					<view class="upload">
						<view class="imgBox" v-for="(item,index) in contractImg" :key="index" @click="toViewImg(index,1)">
							<image :src="item.path" mode=""></image>
							<!-- <image :src="`${baseimg}/static/constr/remove.png`" v-if="closeStatus" @click="removeImg(index)" mode=""></image> -->
						</view>
						<!-- <view class="uploadBtn" v-if="closeStatus" @click="uploadFN(1)">+<span>图片/PDF</span></view> -->
					    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
					</view>
				</view>	
				<view class="contract" v-if=" list.status==3 || list.status==4 || list.status==5">
					<view class="title">
						施工图纸
					</view>
					<view class="upload">
						<view class="imgBox" v-for="(item,index) in constrImg" :key="index" @click="toViewImg(index,2)">
							<image :src="item.path" mode=""></image>
							<!-- <image :src="`${baseimg}/static/constr/remove.png`" v-if="closeStatus" @click="constrImgDel(index)" mode=""></image> -->
						</view>
						<!-- <view class="uploadBtn" v-if="closeStatus" @click="uploadFN(2)">+<span>添加图纸</span></view> -->
					    <!-- <u-upload upload-text="添加图纸" :file-list="buildImgList"></u-upload> -->
					</view>
				</view>
				<template v-if="list.decoration_id">
					<view class="contract" v-if=" list.status==3 || list.status==4 || list.status==5">
						<view class="title">
							设计图纸
						</view>
						<view class="upload">
							<view class="imgBox" v-for="(item,index) in desginImg" :key="index" @click="toViewImg(index,4)">
								<image :src="item.path" mode=""></image>
								<!-- <image :src="`${baseimg}/static/constr/remove.png`" v-if="closeStatus" @click="constrImgDel(index)" mode=""></image> -->
							</view>
							<!-- <view class="uploadBtn" v-if="closeStatus" @click="uploadFN(2)">+<span>添加图纸</span></view> -->
						    <!-- <u-upload upload-text="添加图纸" :file-list="buildImgList"></u-upload> -->
						</view>
					</view>
				</template>
				<view class="contract" v-if=" list.status==3 || list.status==4 || list.status==5">
					<view class="title">
						选材单
					</view>
					<view class="upload">
						<view class="imgBox" v-for="(item,index) in materSingle" :key="index" @click="toViewImg(index,3)">
							<image :src="item.path" mode=""></image>
							<!-- <image :src="`${baseimg}/static/constr/remove.png`" v-if="closeStatus" @click="constrImgDel(index)" mode=""></image> -->
						</view>
						<!-- <view class="uploadBtn" v-if="closeStatus" @click="uploadFN(2)">+<span>添加图纸</span></view> -->
					    <!-- <u-upload upload-text="添加图纸" :file-list="buildImgList"></u-upload> -->
					</view>
				</view>
				<view class="message">
					<view class="title">
						订单信息
					</view>
					<view class="appeal">
						<text class="left">客户诉求 </text>
						<text class="right-appeal">{{list.remark}}</text>
					</view>
					<view class="number df">
						<text class="left">订单编号 </text>
						<text class="center">{{list.order_no}}</text>
						<text class="copy" @click="copyBtn">复制</text>
						
					</view>
					<view class="time df">
						<text class="left">下单时间 </text>
						<text class="right">{{$utils.getFormatDate(list.create_time*1000,"yyyy-MM-dd hh:mm:ss")}}</text>
					</view>
				</view>
				
				<view class="contract-amount" v-if="closeStatus">
					<view class="title">
						合同金额
					</view>
					<input type="text" v-model="list.contract_price" placeholder="请输入订单总金额" class="input-pay" />
				</view>
				<view class="message" v-else>
					<view class="title">
						支付信息
					</view>
					<view class="commission df">
						<text class="left">合同金额 </text>
						<text class="right">¥ {{list.contract_price}}</text>
					</view>
					<view class="appeal">
						<text class="left">支付次数</text>
						<text class="right-appeal">{{list.pay_progress.length}}</text>
					</view>
					<view class="time df">
						<text class="left">支付比例</text>
						<text class="right">{{list.pay_rule?list.pay_rule.replace(/,/g,'、'):''}}</text>
					</view>
					<!-- 支付比例 -->
					<view class="payNumList">
						<view class="item" v-for="(item,index) in list.pay_progress" :key="index">
							<view class="info">
								<view class="num">{{index+1}}</view>
								{{item.rate*100}}%
								<text>(￥{{item.amount}})</text>
							</view>
							<template v-if="list.status==3 || list.status==4">
								<view class="btn" :class="{'active':item.pay_status==1}" @click="toPay(item.pay_status)">{{item.pay_status==1?'去付款':item.pay_status==2?'已付款':''}}</view>
							</template>
							<template v-else>
								<view class="btn">{{item.pay_status!=2?'未付款':'已付款'}}</view>
							</template>
						</view>
					</view>
					<!-- 备注 -->
					<view class="remarksBox">
						<view class="title">
							备注
						</view>
						<view class="textarea">
							<textarea disabled v-model="list.pay_rule_desc" maxlength="1000" placeholder-style="color:#D8D8D8" placeholder="请填写备注~"/>
						</view>
					</view>
					<!-- <template v-if="list.status==3 || list.status==0">
						<view class="money df" v-if="list.is_many_way==1">
							<text class="left">待付定金 </text>
							<text class="total-money">¥ {{list.deposit_price}}</text>
						</view>
					</template>
					<template v-if="list.status==4 && list.is_many_way==1">
						<view class="commission df">
							<text class="left">已付定金 </text>
							<text class="right">¥ {{list.deposit_price}}</text>
						</view>
						<view class="money df">
							<text class="left">待付尾款 </text>
							<text class="total-money">¥ {{list.balance_price}}</text>
						</view>
					</template>
					<template v-if="list.status==5 && list.is_many_way==1">
						<view class="commission df">
							<text class="left">已付定金 </text>
							<text class="right">¥ {{list.deposit_price}}</text>
						</view>
						<view class="money df">
							<text class="left">已付尾款 </text>
							<text class="total-money">¥ {{list.balance_price}}</text>
						</view>
					</template> -->
				</view>
			</view>
			<view class="footer" v-if="appeal_id">
				<view class="btn" v-if="appealDetail.status!=2 && appealDetail.status!=3">
					<button type="default" class="btn-text" @click="toResolve">已解决</button>
					<!-- <button type="default" class="btn-text" @click="toBackOrder">回退</button> -->
					<button type="default" v-if="appealDetail.is_platform==0" class="btn-text" @click="toIntervene">平台介入</button>
					<button type="default" class="btn-text active" @click="toWithdraw">撤回申诉</button>
				</view>
				<view class="btn" v-else>
					<button style="width: 190rpx;" type="default" class="btn-text" @click="toTelPhone">联系施工队</button>
				</view>
			</view>
			<view class="footer" v-else :style="list.status==4||list.status==5?'justify-content: space-between;':''">
				<view class="more" v-if="list.status==4 || list.status==5">
					<view @click="openMore">更多</view>
					<view class="moreItem" style="top:-250rpx;" v-if="dis&&list.status==4">
						<view class="" @click="toBackOrder">回退</view>
						<view class="" @click="toArchReta">档案留存</view>
						<view class="" @click="toBroad">施工播报</view>
						<i class="iconfont">&#xe674;</i>
					</view>
					<view class="moreItem" v-if="dis&&list.status==5">
						<!-- <view class="" @click="toBackOrder">回退</view> -->
						<view class="" @click="toDelOrder">删除订单</view>
						<view class="" @click="toArchReta">档案留存</view>
						<view class="" @click="toBroad">施工播报</view>
						<i class="iconfont">&#xe674;</i>
					</view>
				</view>
				<view class="btn" v-if="list.status==3">
					<button class="btn-text" @click="toClose" shape="circle">关闭订单</button>
					<!-- <button class="btn-text active" @click="toPay" shape="circle">付款</button> -->
				</view>
				<view class="btn" v-if="list.status==4">
					<!-- <button class="btn-text" @click="toMonitor" shape="circle">远程监控</button> -->
					<button class="btn-text" @click="toProgress" shape="circle">施工进度</button>
					<!-- <button class="btn-text active" @click="toPay" v-if="list.is_many_way==1" shape="circle">付款</button> -->
					<button class="btn-text active" @click="toConfirm" v-if="list.pay_status==1" shape="circle">确认完工</button>
				</view>
				<view class="btn" v-if="list.status==5">
					<button v-if="list.is_appeal==0" class="btn-text" @click="toAppealAdd" shape="circle">申诉</button>
					<button class="btn-text" @click="toProgress" shape="circle">施工进度</button>
					<button class="btn-text active" v-if="list.is_comment==0" @click="toEvaluatae(list)" shape="circle">立即评价</button>
				</view>
				<view class="btn" v-if="list.status==0">
					<button class="btn-text" @click="toDelOrder" shape="circle">删除订单</button>
				</view>
			</view>
			
			<!-- 二维码 -->
			<view class="qrcodepop" :style="showModal?'':'display:none;'">
				<view class="qrcodecont">
					<view class="qrname">
						<view>核销二维码</view>
						<view><canvas  canvas-id="myQrcode"></canvas></view>
					</view>
					<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
				</view>
			</view>
		</view>
	</template>
	
	<script>
		import countdown from "@/components/cz-countdown/cz-countdown.vue"
		import service_constr from '@/service/constr.js'
		import service_mall from '@/service/mall.js'
		import URL from '@/config/url.js'
		const qrCode = require('@/utils/weapp-qrcode.js')
		export default {
			components: {
				countdown,
			},
			data() {
				return {
					status: {
						1: "待接单",
						2: "待处理",
						3: "待付款",
						4: "施工中",
						5: "已完成",
						0: "已关闭"
					},
					// 申述订单状态
					appealStatus:{
						0: "待处理",
						1: "处理中",
						2: "已解决",
						3: "已撤回"
					},
					baseimg:this.$static,
					list:{
						id:null,
						// director:[], 			//负责人
						// progress:[],			//进度
						build_start_time:'',	//开始时间
						build_end_time:'',		//结束时间
						realname:'',			//姓名
						phone:'',				//手机号
						estate:'',				//小区
						house_type:'',			//户型
						house_area:'',			//面积
						address:'',				//地址
						city:'',				//城市
						district:'',			//县区
						street:'',				//街道
						remark:'',				//户主诉求
						contract_price:'',		//合同金额
						draw_thumb_url:'',		//施工图纸
						material_thumb_url:'',	//选材单
						design_thumb_url:'', 	//设计图纸
						contract_thumb_url:''	,//合同
						
					},
					startDate:'2020-02-03',
					endDate:'2021-03-06',
					footerShow:false,
					show:false,
					order_id:null,
					personCharge1:{}, //管家
					personCharge2:{}, //工长
					contractImg:[], //合同
					materSingle:[],//选材单
					constrImg:[],  //施工图纸
					desginImg:[],  //设计图纸
					closeStatus:false,
					housekeepSelect:false, //防止onshow重复push图片
					payShow:false, //支付类型弹出状态
					terminal:"",
					showModal:false,
					QrCode:'',
					tapIndex:1,
					dis:false,
					startTime:'',
					endTime:'',
					appeal_id:'',//申述id
					appealDetail:{},//申述详情
				}
			},
			onLoad(options) {
				this.$utils.getUrl()
				this.order_id = options.order_id;
				this.appeal_id = options.appeal_id
				
				// this.getDetail()
				//#ifdef MP-WEIXIN
					this.terminal = "wxapplet";
				//#endif
			},
		filters: {
			formatDates(value) {
				  let date = new Date(parseInt(value) * 1000);
				  let y = date.getFullYear();
				  let m = date.getMonth() + 1;
				  m = m < 10 ? "0" + m : m;
				  let d = date.getDate();
				  d = d < 10 ? "0" + d : d;
				  let h = date.getHours();
				  h = h < 10 ? "0" + h : h;
				  let minute = date.getMinutes();
				  let second = date.getSeconds();
				  minute = minute < 10 ? "0" + minute : minute;
				  second = second < 10 ? "0" + second : second;
				  return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
			},
			formatDate(value) {
				var date = new Date(value);
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "/" + month + "/" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
			onShow() {
				// if(this.housekeepSelect){
					if(this.appeal_id){
						this.getAppealDetail()
					}
					this.getDetail()
				// }
			},
			onHide() {
				this.dis = false
			},
			methods:{
				
				// 获取订单详情
				getDetail(){
					// this.housekeepSelect = false
					service_constr.getDetail({order_id:this.order_id}).then(res=>{
						if(res.code==1){
							console.log(res,'订单详情')
							this.list = res.data?res.data:{};
							let endata = res.data.handle_time + 86340
							this.startTime= this.$options.filters.formatDate(new Date())
							this.endTime= this.$options.filters.formatDates(endata)
							 console.log(this.startTime,this.endTime,'\------')
							
							if(this.housekeepSelect==false){
								// 合同
								let isArr = Array.isArray(res.data.contract_thumb_url)
								if(isArr){
									this.contractImg = res.data.contract_thumb_url;
								}else{
									this.contractImg.push(res.data.contract_thumb_url)
									let noRepeat = [...new Set(this.contractImg.map(item=> JSON.stringify(item)))];
									this.contractImg = noRepeat.map(item=> JSON.parse(item))
									console.log(this.contractImg)
								}
								
								// 施工图纸
								let isArr2 = Array.isArray(res.data.draw_thumb_url)
								if(isArr2){
									this.constrImg = res.data.draw_thumb_url;
								}else{
									this.constrImg.push(res.data.draw_thumb_url)
									// 重复调用订单信息时去重
									let noRepeat = [...new Set(this.constrImg.map(item=> JSON.stringify(item)))];
									this.constrImg = noRepeat.map(item=> JSON.parse(item))
									console.log(this.constrImg)
								}
								
								// 选材单
								let isArr3 = Array.isArray(res.data.material_thumb_url)
								if(isArr3){
									this.materSingle = res.data.material_thumb_url;
								}else{
									this.materSingle.push(res.data.material_thumb_url)
									// 重复调用订单信息时去重
									let noRepeat = [...new Set(this.materSingle.map(item=> JSON.stringify(item)))];
									this.materSingle = noRepeat.map(item=> JSON.parse(item))
									console.log(this.materSingle)
								}
								
								// 设计图纸
								let isArr4 = Array.isArray(res.data.design_thumb_url)
								if(isArr4){
									this.desginImg = res.data.design_thumb_url;
								}else{
									this.desginImg.push(res.data.design_thumb_url)
									// 重复调用订单信息时去重
									let noRepeat = [...new Set(this.desginImg.map(item=> JSON.stringify(item)))];
									this.desginImg = noRepeat.map(item=> JSON.parse(item))
									console.log(this.desginImg)
								}
								
							}
							// this.contractImg = res.data.contract_thumb_url?res.data.contract_thumb_url:[];
							// this.constrImg = res.data.draw_thumb_url?res.data.draw_thumb_url:[];
							this.startDate = this.$utils.getFormatDate(res.data.build_start_time*1000,'yyyy-MM-dd');
							this.endDate = this.$utils.getFormatDate(res.data.build_end_time*1000,'yyyy-MM-dd');
							// this.personCharge1 = res.data.director[0]?res.data.director[0]:{};
							// this.personCharge2 = res.data.director[1]?res.data.director[1]:{};
							res.data.director.map(item=>{
								if(item.position==1){
									this.personCharge1 = item
								}else{
									this.personCharge2 = item
								}
							})
							
							
						}
					})
				},
				
				// 获取申述详情
				getAppealDetail(){
					service_constr.getAppealDetail({appeal_id:this.appeal_id}).then(res=>{
						console.log(res,'申述详情')
						if(res.code==1){
							this.appealDetail = res.data?res.data:{}
						}
					})
				},
				
				// 立即评价按钮
				toEvaluatae(item){
					if(item.team_id){
						uni.navigateTo({
							url:'/pages_two/pages/construction/evaluate/add?teamId=' + item.team_id + '&decorationId=' + item.decoration_id + '&name=' + item.team_name + '&orderId=' + item.id
						})
					}else{
						uni.navigateTo({
							url:'/pages_two/pages/construction/evaluate/add?decorationId=' + item.decoration_id + '&teamId=' + item.team_id + '&name=' + item.team_name + '&orderId=' + item.id
						})
					}
				},
				
				initQrCode:function(){
					new qrCode('myQrcode', {
						text: this.QrCode,
						width: 160,
						height: 160,
						colorDark: "#333333",
						colorLight: "#FFFFFF",
						correctLevel: qrCode.CorrectLevel.H
					})
				},
				
				openMore(){ //打开更多
					if(this.dis){
						this.dis = false
					}else{
						this.dis = true
					}
				},
				
				// 进入施工播报
				toBroad(){
					uni.navigateTo({
						url:`/pages_two/pages/construction/broadcast/broadcast?order_id=${this.order_id}&team_id=${this.list.team_id}&tabName=施工播报`
					})
				},
				
				// 进入档案留存
				toArchReta(){
					uni.navigateTo({
						url:`/pages_two/pages/construction/broadcast/broadcast?order_id=${this.order_id}&team_id=${this.list.team_id}&tabName=档案留存`
					})
				},
				
				// 进入施工进度
				toProgress(){
					uni.navigateTo({
						url:`/pages_two/pages/construction/broadcast/broadcast?order_id=${this.order_id}&team_id=${this.list.team_id}&tabName=施工节点`
					})
				},
				
				// 进入远程监控
				toMonitor(){
					uni.navigateTo({
						url:`/pages_two/pages/construction/broadcast/broadcast?order_id=${this.order_id}&team_id=${this.list.team_id}&tabName=远程监控`
					})
				},
				
				// 复制按钮
				copyBtn(){
					uni.setClipboardData({
					    data: this.list.order_no,
					    success: function () {
							console.log('复制成功')
					    }
					});
				},
				
				// 申诉按钮
				toAppealAdd(){
					let params = encodeURIComponent(JSON.stringify(this.list))
					uni.navigateTo({
						url:'/pages_decoration/pages/appealAdd/add?data='+params+'&orderType=builder'
					})
				},
				
				// 确认完工按钮
				toConfirm(){
					uni.showModal({
						content:'是否确定满意完工？',
						success:res=>{
							if(res.confirm){
								service_constr.confirmOrder({order_id:this.order_id}).then(res=>{
									console.log(res,'确定完工')
									if(res.code==1){
										uni.showToast({
											title:'已确定完工',
											icon:'success'
										})
										setTimeout(function(){
											uni.navigateBack({
												delta:1
											})
										},500)
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}
						}
					})
				},
				
				// 回退
				toBackOrder(){
					let that = this
					uni.showModal({
						content:'确定回退该订单吗？',
						success:res=>{
							if(res.confirm){
								let params = {
									order_id:this.order_id,
									is_back:1
								}
								service_constr.toBackOrder(params).then(res=>{
									console.log(res,'回退结果')
									if(res.code==1){
										uni.showToast({
											title:'回退成功',
											icon:'success'
										})
										setTimeout(function(){that.getDetail()},500)
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}
						}
					})
				},
				
				// 平台介入按钮
				toIntervene(){
					uni.showModal({
						title:'确定平台介入该申诉吗？',
						success:res=>{
							if(res.confirm){
								let params = {
									appeal_id:this.appeal_id
								}
								service_constr.toIntervene(params).then(res=>{
									if(res.code==1){
										uni.showToast({
											title:'平台介入成功',
											icon:'success'
										})
										this.getAppealDetail()
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}
						}
					})
				},
				
				// 撤回申诉按钮
				toWithdraw(){
					uni.showModal({
						title:'确定撤回该申诉吗？',
						success:res=>{
							if(res.confirm){
								let params = {
									appeal_id:this.appeal_id
								}
								service_constr.toWithdraw(params).then(res=>{
									if(res.code==1){
										uni.showToast({
											title:'撤回成功',
											icon:'success'
										})
										this.getAppealDetail()
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}
						}
					})
				},
				
				// 解决申诉按钮
				toResolve(){
					uni.showModal({
						title:'确定解决该申诉吗？',
						success:res=>{
							if(res.confirm){
								let params = {
									appeal_id:this.appeal_id
								}
								service_constr.toResolve(params).then(res=>{
									if(res.code==1){
										uni.showToast({
											title:'已解决',
											icon:'success'
										})
										this.getAppealDetail()
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}
						}
					})
				},
				
				// 核销二维码
				handleShowCodeClick:function(){
					this.showModal = true
					this.$nextTick(function(){
						this.initQrCode()
					})
				},
				handleHideCodeClick:function(){
					this.showModal = false
				},
				
				// 支付按钮
				toPay(type){
					if(type!=1){
						return
					}
					let itemList = [ "微信支付", "线下支付"]
					this.itemList = itemList
					uni.showActionSheet({
					    itemList: this.itemList,
					    success: (t) => {
							this.tapIndex = t.tapIndex+1
							console.log(this.list.order_no,'订单编号')
							this.getpayorder(this.list.order_no)
						}
					});
				},
				
				getpayorder(order_codes){
					service_mall.getpay({
						order_no:order_codes,
						type:'builder_order',
						pay_type:this.tapIndex
						}).then(res=>{
						if(res.code == 1){
							let data = res.data
						    if(this.tapIndex == 1){	
								if(this.terminal == 'wxapplet'){
									uni.requestPayment({
										appId:res.data.appId,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										paySign: res.data.paySign,
										signType: res.data.signType,
										timeStamp: res.data.timeStamp,
										success: (suc) => {
											// uni.navigateTo({
											// 	url: `/pages_two/pages/order/sucess?type=1&order_id=${this.order_id}$order_code=${order_codes}`
											// })
										},
										fail: (err) => {
											uni.navigateTo({
												url: `/pages_two/pages/order/sucess?type=0&order_id=${this.order_id}$order_code=${order_codes}`
											})
										}
									});
								}else{
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: {
											"appid":res.data.appid,
											"partnerid": res.data.partnerid,
											"prepayid": res.data.prepayid,
											"noncestr": res.data.noncestr,
											"package": res.data.package,
											"timestamp": res.data.timestamp,
											"sign": res.data.sign,
										},
										success: (suc) => {
											// uni.navigateTo({
											// 	url: `/pages_two/pages/order/sucess?type=1&order_id=${this.order_id}$order_code=${order_codes}`
											// })
										},
										fail: (err) => {
											console.log(err,12345)
											uni.navigateTo({
												url: `/pages_two/pages/order/sucess?type=0&order_id=${this.order_id}$order_code=${order_codes}`
											})
										}
									});
								}
							}else{
								this.QrCode = res.data.verificationCode
								this.handleShowCodeClick()
							}
											
						}else{
								this.failMsg(res)
						}	
					})
				},
				
				// 关闭订单
				toClose(){
					uni.showModal({
						title:'提示',
						content:'确定要关闭此订单吗？',
						success:res=>{
						    if (res.confirm) {
						        console.log('用户点击确定');
								service_constr.cancelOrder({order_id:this.order_id}).then(res=>{
									if(res.code==1){
										setTimeout(function(){
											uni.showToast({
												title:'已关闭',
												icon:'success'
											})
										},500)
										uni.navigateBack()
									}
								})
						    } else if (res.cancel) {
						        console.log('用户点击取消');
						    }
						}
					})
				},
				// 删除订单
				toDelOrder(){
					
				},
				
				// 图片预览
				toViewImg(index,type) { //type=1合同，type=2施工图纸，type=4设计图纸
					let imgArr = type==1?this.contractImg:type==2?this.constrImg:type==3?this.materSingle:type==4?this.desginImg:this.appealDetail.media;
					let urlType = Array.isArray(imgArr)
					console.log(imgArr,'需要预览的图片')
					let imgUrl = []
					if (urlType) {
						imgArr.map(item => {
							imgUrl.push(item.path)
						})
					} else {
						imgUrl.push(imgArr.path)
					}
					uni.previewImage({
						current: index, //预览图片的下标
						urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					});
				},
				
				// 电话按钮
				toTelPhone(){
					console.log(this.list.team_phone,'电话电话')
					uni.makePhoneCall({
					 	// 手机号
					    phoneNumber: this.list.team_phone, 
						// 成功回调
						success: (res) => {
							console.log('调用成功!')	
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					});
				},
				
				
				change(e) {
					console.log(e,9999);
					this.startDate = e.startDate
					this.endDate = e.endDate
					this.footerShow = false
				},
				handleTime(){
					// this.show = true
					// this.footerShow = true
				},
				
			}
		}
	</script>
	
	<style lang="less" scoped>
		.container{
			.top-bg{
				background:  url(http://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
				width: 100%;
				height: 468rpx;
				position: relative;
				z-index: 88;
				/deep/ .u-navbar .u-border-bottom{
							border: 0 !important;
				}
				.iconfont{
					font-size: 40rpx;
					margin-right: 10rpx;
					color: #19BE6B;
				}
				.title{
					display: flex;
					align-items: center;
					margin: 80rpx 0 0 44rpx;
					.icon-shijianxuanzhong{
						width: 40rpx;
						height: 40rpx;
						color: #94e3b4;
						margin-right: 6rpx;
					}
					.pay{
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 36rpx;
						color: #FFFFFF;
					}
				}
				.time{
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 36rpx;
					color: #FFFFFF;
					margin: 6rpx 0 0 44rpx;
				}		
			}
			.content{
				position: absolute;
				left: 0;
				top: 350rpx;
				z-index: 99;
				padding: 24rpx 24rpx 200rpx 24rpx;
				width: 100%;
				.detail{
					// padding: 0 24rpx;
					
					.detail-content{
						background-color: #fff;
						padding: 30rpx 24rpx;
						margin-bottom: 22rpx;
						border-radius: 16rpx;
						position: relative;
						.is_back{
							position: absolute;
							top: 0;
							right: 0;
							width: 90rpx;
							height: 36rpx;
							background-color: #E7AD14;
							border-radius: 0 16rpx 0 16rpx;
							font: 400 22rpx/36rpx PingFang SC;
							text-align: center;
							color: #fff;
						}
						.top{
							padding: 28rpx;
							background: #F8F8F8;
							border-radius: 8rpx;
							color: #505050;
							margin-bottom: 30rpx;
							.size{
								display: flex;
								justify-content: space-between;
								margin-bottom: 40rpx;
								.center{
									display: flex;
									flex-direction: column;
									justify-content: flex-end;
									align-items: center;
									// text-align: right;
									// align-items: right;
									}
									.right{
										text-align: right;
									}
							}
							.address{
								
								.address-detail{
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 400;
									line-height: 40rpx;
									color: #505050;
								}
							}
								.t {
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									line-height: 36rpx;
									color: #A0A0A0;
								}
								
							
						}
						.product {
							padding-bottom: 30rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							// padding-top: 22rpx;
							.product-info{
								display: flex;
							}
							.product-img {
								width: 84rpx;
								height: 84rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}
							.name{
								.name-top{
									font-size: 26rpx;
									font-weight: 500;
									line-height: 40rpx;
									color: #0A0605;
								}
								.phone{
									font-size: 26rpx;
									font-weight: 400;
									line-height: 40rpx;
									color: #505050;
								}
							}
							.iconfont{
								font-size: 50rpx;
							}
							
						}
						
						.btn-box {
							&:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; }
							.more {
								float: left;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								color: #A0A0A0;
								padding-top: 10rpx;
							}
							.price-box {
								text-align: right;
								padding: 40rpx 0 22rpx 0;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								line-height: 20rpx;
								color: #878787;
								.d-price {
									color: #dfb368;
									font-size: 32rpx;
									padding-left: 20rpx;
								}
							}
							.btn {
								// width: 50%;
								// float: right;
								display: flex;
								justify-content:flex-end ;
								align-items: center;
								.btn-text {
									width: 172rpx;
									height: 64rpx;
									background: #FFFFFF;
									border: 2rpx solid #505050;
									opacity: 1;
									border-radius: 32rpx;
									text-align: center;
									line-height: 64rpx;
									color: #505050;
									font-size: 26rpx;
									margin: 0 10rpx;
								}
								.active{
									background-color: #DBA954;
									color: #fff;
									border: 0;
								}
							}
							
						}
					}
				}
				
				// 施工负责人
				.personInCharge{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
					span{
						font: 400 22rpx/18rpx PingFang SC;
						color: #505050;
					}
				}
				.personInfo{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 48rpx 80rpx 0;
					font: 400 26rpx/40rpx PingFang SC;
					color: #0A0605;
					.item{
						display: flex;
						flex-direction: column;
						align-items: center;
						image{width: 114rpx;height: 114rpx;border-radius: 50%;margin-bottom: 16rpx;}
						span{
							margin-top: 4rpx;
							width: 60rpx;
							height: 30rpx;
							padding: 0rpx 12rpx;
							font: 400 18rpx/30rpx PingFang SC;
							color: #fff;
							border-radius: 18rpx;
							background-color: #636B90;
						}
						.Img{
							text-align: center;
							line-height: 114rpx;
							width: 114rpx;height: 114rpx;border-radius: 50%; background-color: #F8F8F8;
							.gL_add{width: 100%;height: 100%;color: #A0A0A0;font-size: 40rpx;}
						}
						.span2{color: #505050;background-color: #FFCE0D;}
					}
					.border{
						width: 0;
						height: 120rpx;
						border: 1rpx solid #D8D8D8;
					}
				}
				}
				.design-time{
					padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #0A0605;
					}
					.u-calendar{
						margin-top: 40rpx;
						// z-index: 99999;
						.title{
							text-align: center;
							padding: 20rpx 0 0 0;
						}
						.left{
							background: #F8F8F8;
							padding: 24rpx 36rpx;
						}
						.right{
							background: #F8F8F8;
							padding: 24rpx 36rpx;
						}
					}
				}
				
				.contract{
					padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin: 30rpx 0;
					position: relative;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #0A0605;
					}
					
					// 申述信息
					.appealInfo{
						display: flex;
						font: 500 26rpx/50rpx PingFang SC;
						color: #3D3D3D;
						text{
							flex-shrink: 0;
							margin-right: 35rpx;
							color: #9B9B9B;
						}
						.mediaBox{
							width: 100%;
							.mediaItem{
								width: 100%;
								display: grid;
								grid-template-columns: repeat(5, 1fr);
								grid-gap: .5rem;
								image{
									width: 80rpx;
									height: 80rpx;
									border-radius: 2rpx;
								}
							}
							.active{
								grid-template-columns: repeat(1, 1fr);
								video{
									width: 80%;
									height: 210rpx;
									border-radius: 8rpx;
								}
							}
						}
					}
					// 申述（平台介入图片）
					.imgTag{
						width: 170rpx;
						height: 140rpx;
						position: absolute;
						top: 0;
						right: 0;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
					.upload{
						margin-top: 40rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						.imgBox{
							margin: 0 5rpx 10rpx;
							position: relative;
							width: 200rpx;
							height: 200rpx;
							border-radius: 4rpx;
							image:nth-child(1){
								width: 100%;
								height: 100%;
								border-radius: 4rpx;
							}
							image:nth-child(2){
								width: 50rpx;
								height: 50rpx;
								position: absolute;
								top: 5rpx;
								right: 5rpx;
							}
						}
						.uploadBtn{
							margin: 0 5rpx 10rpx;
							background-color: #F8F8F8;
							border-radius: 4rpx;
							width: 200rpx;
							height: 200rpx;
							font-size: 60rpx;
							display:  flex;
							align-items: center;
							color: #A0A0A0;
							flex-direction: column;
							justify-content: center;
							span{font: 400 22rpx/36rpx PingFang SC;}
						}
					}
				}
				.design{
					padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #0A0605;
					}
					.upload{
						margin-top: 40rpx;
					}
				}
				.contract-amount{
						padding: 24rpx;
						background-color: #fff;
						border-radius: 16rpx;
						margin-top: 30rpx;
						.title{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 40rpx;
							color: #0A0605;
						}
				
						.input-pay{
								width: 100%;
								height: 84rpx;
								margin-top: 40rpx;
								background-color: #F8F8F8;
								color: #DBA954;
						}
						
				}
				.message{
					padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						margin-bottom: 20rpx;
						color: #0A0605;
					}
					.left{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 40rpx;
						color: #A0A0A0;
						display: inline-block;
						margin-right: 10rpx;
						// width: 27%;
					}
					.right{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 40rpx;
						color: #505050;
					}
					.copy{
						padding: 6rpx 18rpx;
						background-color: rgba(219, 169, 84, 0.1);
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 20rpx;
						color: #DBA954;
						border-radius: 18rpx;
						margin-left: 10rpx;
					}
					.total-money{
						color: #DBA954;
					}
					.right-appeal{
						width: 73%;
						// margin-left: 62rpx;
					}
					.df{
						margin: 20rpx 0;
					}
					// 支付比例列表
					.payNumList{
						.item{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin: 30rpx 0;
							.info{
								display: flex;
								align-items: center;
								.num{
									width: 35rpx;
									height: 35rpx;
									border: 2rpx solid #A0A0A0;
									border-radius: 50%;
									text-align: center;
									font-size: 22rpx;
									line-height: 30rpx;
									margin-right: 20rpx;
								}
								text{
									color: #DCAB58;
									margin-left: 20rpx;
								}
							}
							.btn{
								color: #DCAB58;
							}
							.active{
								padding: 8rpx 30rpx;
								border-radius: 28rpx;
								color: #fff;
								background: linear-gradient(90deg, #DBA954 0%, #EABA6A 100%);
							}
						}
					}
					// 备注
					.remarksBox{
						// padding: 24rpx;
						background-color: #fff;
						border-radius: 16rpx;
						margin-top: 30rpx;
						.title{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 40rpx;
							color: #0A0605;
						}
						.textarea{
							background: #F8F8F8;
							padding: 24rpx;
							height: 160rpx;
							overflow-y: auto;
							margin-top: 20rpx;
						}
					}
					
				}
			}
			.footer{
				height: 150rpx;
				width: 100%;
				background-color: #fff;
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 9999;
				padding: 30rpx;
				display: flex;
				justify-content:flex-end ;
				align-items: center;
				// justify-content: space-between;
				button{
					width: 606rpx;
					height:80rpx;
					background: #DBA954;
					opacity: 1;
					border-radius: 46rpx;
					text-align: center;
					color: #fff;
					font: 500 32rpx/80rpx PingFang SC;
					margin: 0 auto;
				}
				.btn{display: flex;align-items: center;}
				.btn-text {
					width: 172rpx;
					height: 64rpx;
					background: #FFFFFF;
					border: 2rpx solid #505050;
					opacity: 1;
					border-radius: 32rpx;
					text-align: center;
					line-height: 64rpx;
					color: #505050;
					font-size: 26rpx;
					margin-left:10rpx;
				}
				.active{
					// background-color: #DBA954;
					// color: #fff;
					// border: 0;
					// width: 240rpx;
					border-color: #DBA954;
					color: #DBA954;
				}
				.more{
					position: relative;
					.moreItem{
						position: absolute;
						top: -330rpx;
						left: -4rpx;
						z-index: 100;
						border-radius: 8rpx;
						width: 144rpx;
						// height: 80rpx;
						text-align: center;
						background-color: rgba(10,6,5,0.6);
						color: #fff;
						font: 400 26rpx/80rpx PingFang SC;
						i{
							height: 16rpx;
							color: rgba(10,6,5,0.6);
							position: absolute;
							font-size: 20rpx;
							left: 8rpx;
							bottom: 21rpx;
						}
					}
				}
			}
			.payBox{
				width: 100%;
				.item{
					font: 600 30rpx/24rpx PingFang SC;
					text-align: center;
					padding: 18px 0;
				}
			}
			.qrcodepop{
				position: fixed;
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.2);
				z-index: 9999;
				.qrcodecont{
					width: 400rpx;
					position: absolute;
					left: 50%;
					top: 25%;
					margin-left: -200rpx;
					.qrname{
						background: #fff;
						line-height: 80rpx;
						height: 440rpx;
						overflow: hidden;
						padding: 20rpx;
						text-align: center;
						border-radius: 15rpx;
						canvas{
							width: 300rpx;
							height: 300rpx;
							margin: auto;
						}
					}
					.icon-close{
						display: block;
						font-size: 60rpx;
						color: #fff;
						text-align: center;
						margin: 30rpx auto;
					}
				}
			}	
		}
	</style>
	
	